<template>
      <el-button type="success" @click="reload">刷新</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期" prop="date"/>
    <el-table-column label="图片" prop="photo">
      <template #default="{ row }">
        <img :src="row.photo" style="max-width: 100px; max-height: 100px"/>
      </template>
    </el-table-column>
    <el-table-column label="读数1" prop="result1"/>
    <el-table-column label="读数2" prop="result2"/>
    <el-table-column label="读数3" prop="result3"/>
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="default" @click="handleEdit(scope.$index, scope.row)"
        >Edit
        </el-button
        >
        <el-button
            size="default"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >Delete
        </el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div>
    <hr class="my-4"/>
    <el-pagination
        v-if="total > pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- <el-button text @click="openDialog">
    click to open the Dialog
  </el-button> -->

  <el-dialog
  v-model="dialogVisible"
  title="修改识别结果"
  width="30%"
  :before-close="handleClose"
>
<div>
  读数1
  <el-input v-model="edit1" placeholder="请输入"/>
  读数2
  <el-input v-model="edit2" placeholder="请输入" />
  读数3
  <el-input v-model="edit3" placeholder="请输入" />
  <p></p>
  <img :src="editImageUrl" style="max-width: 100%; max-height: 100%;" alt="">
</div>

  <template #footer>
    <span class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="confirmDialog">
        确定修改
      </el-button>
    </span>
  </template>
</el-dialog>

</template>


<script>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      editingIndex: -1,
      dialogVisible: false,
      editImageId:'',
      editImageUrl:'',
      edit1:'',
      edit2:'',
      edit3:'',
    }
  },
  computed: {
    // 计算属性，根据 currentPage 和 pageSize 计算当前页的数据
    currentData() {
      const startIdx = (this.currentPage - 1) * this.pageSize
      return this.tableData.slice(startIdx, startIdx + this.pageSize)
    }
  },
  methods: {
    reload(){
      this.fetchData();
    },
    openDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    confirmDialog() {
      // do something
      this.$api.recordApi.updateById(this.editImageId,this.edit1,this.edit2,this.edit3)
        .then(res => {
          res = res.data

          if (res.code == 200) {
            // console.log("删除成功")
            ElMessage({
              message: '修改成功！',
              type: 'success',
              duration: 1000,
            })
            this.fetchData()

          } else {
            // 不成功，什么也不做
          }
        })
        .catch(err => {
          console.log("请求失败")
        })
      this.dialogVisible = false
    },
    handleClose(done) {
      ElMessageBox.confirm('确定要关闭?')
        .then(() => {
          done()
        })
        .catch(() => {
          // catch error
        })
    },
    // 处理每页显示条数变化事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },

    // 处理当前页码变化事件
    handleCurrentChange(val) {
      console.log(`当前页码：${val}`)
      this.currentPage = val
    },

    // 编辑按钮点击事件
    handleEdit(index, row) {
      this.editingIndex = index
      console.log(index);
      this.dialogVisible = true
      console.log(this.edit1)
      this.editImageUrl=this.tableData[index].photo
      this.edit1=this.tableData[index].result1
      this.edit2=this.tableData[index].result2
      this.edit3=this.tableData[index].result3
      this.editImageId=this.tableData[index].imageId
    },

    // 删除按钮点击事件
    handleDelete(index, row) {
      this.tableData.splice(index, 1)
      console.log(this.tableData[index].imageId)
      this.$api.recordApi.deleteById(this.tableData[index].imageId)
        .then(res => {
          res = res.data

          if (res.code == 200) {
            // console.log("删除成功")
            ElMessage({
              message: '删除成功！',
              type: 'success',
              duration: 1000,
            })

          } else {
            // 不成功，什么也不做
          }
        })
        .catch(err => {
          console.log("请求失败")
        })

    },

    // 模拟异步请求数据
    fetchData() {
      console.log(`请求数据：第 ${this.currentPage} 页，每页 ${this.pageSize} 条`)
      this.$api.recordApi.getPage(this.currentPage,this.pageSize,'lzy')
        .then(res => {
          res = res.data

          if (res.code == 200) {
            // console.log(res.data.total)
            let records=res.data.records;
            console.log(records.length)
            let recordArr=[]
            console.log(records[1].imageId)
            for(let i =0;i<records.length;i++){
                let url=records[i].imageurl;
                url=url.substring(49);
                recordArr.push({
                date:records[i].datetime,
                photo:url,
                result1:records[i].record1,
                result2:records[i].record2,
                result3:records[i].record3,
                imageId:records[i].imageId,

              })
            }
            this.tableData = recordArr
            this.total=res.data.total

          } else {
            // 不成功，什么也不做哈哈
          }
        })
        .catch(err => {
          console.log("请求失败")
        })
      // console.log(`请求数据：第 ${this.currentPage} 页，每页 ${this.pageSize} 条`)
      // // 模拟异步请求数据
      // setTimeout(() => {
      //   const data = []
      //   const startIdx = (this.currentPage - 1) * this.pageSize
      //   for (let i = startIdx; i < startIdx + this.pageSize; i++) {
      //     data.push({
      //       date: `2023-06-${i + 1}`,
      //       photo: `https://picsum.photos/id/${i + 1}/200/200`,
      //       result: `地址${i + 1}`
      //     })
      //   }
      //   this.tableData = data
      //   this.total = 100 // 总数据条数
      // }, 500)
    },
    mounted() {
        // this.fetchData()
    }
  },
  watch: {
    // 观察 currentPage 和 pageSize 的变化，重新更新表格数据
    currentPage: {
      handler: 'fetchData',
      immediate: true
    },
    pageSize: {
      handler: 'fetchData',
      immediate: true
    }
  }
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
